<template>
  <div>
    <my-article v-for='item in artList' :key="item.name" :art-list='item'></my-article>
    <button @click='push'>添加文章</button>
    <button @click='pop'>尾部去除一篇文章</button>
    <button @click='unshift'>在头部加入一条数据</button>
    <button @click='shift'>在头部去除一条数据</button>
    <button @click='reverse'>把所有数据进行反转</button>
    <button @click='clear'>清除所有数据</button>
  </div>
</template>

<script>
  import myArticle from './myArticle.vue'
  export default {
    components: {
      myArticle
    },
    created () {
      // 比方说我们是从后台拿到的文章集合
      this.artList = [
        { name: 'ziksang1', startTime: '1小时前', content: 'aaaaaaaaa', good: 1 },
        { name: 'ziksang2', startTime: '2小时前', content: 'bbbbbbbbb', good: 2 },
        { name: 'ziksang3', startTime: '3小时前', content: 'ccccccccc', good: 3 },
        { name: 'ziksang4', startTime: '4小时前', content: 'ddddddddd', good: 4 }
      ]
    },
    data () {
      return {
        artList: []
      }
    },
    methods: {
      push () {
        this.artList.push({
          name: 'ziksang5',
          startTime: '5小时前',
          content: 'eeeeeeeeee',
          good: 5
        })
      },
      pop () {
        this.artList.pop()
      },
      shift () {
        this.artList.shift()
      },
      unshift () {
        this.artList.unshift({
          name: 'ziksang3',
          age: 40
        })
      },
      reverse () {
        this.artList.reverse()
      },
      clear () {
        this.artList = []
      }
    }
  }

</script>
